<template>
	<view class="container">
		<view class="van_top">
			<van-nav-bar title="夏日热销" fixed left-arrow @click-left="onClickLeft" />
		</view>
		<view class="content" :style="{paddingBottom:(safeAreaBottom + 80) + 'px'}">
			<view class="safe-area" :style="{ height: (statusBarHeight + 46) + 'px' }" style="width: 100%;"></view>
			<view class="content-box">
				<view class="content-box-top">
					<image src="https://yukukeji-oss.oss-cn-beijing.aliyuncs.com/source/XcxShopB1/xrrxtop.png" mode="aspectFill"></image>
				</view>
				<view class="goodsList">
					<ShopCard v-for="(item, index) in goodsList" :key="item.id" :ecCommodityId="item.id" :ecCommodityType="item.type"
						:sellout="item.releaseStock === 0" :style="{ marginBottom: (index == goodsList.length - 1) ? 0 : '16rpx' }"
						@click.native="toDetail(item.id,item.releaseStock)" @refreshPage="refreshPage" @clickAddBtn="clickAddBtn" :animationStatus="start">
						<template #pic>
							<block>
								<image :src="item.images" mode="aspectFill"></image>
							</block>
						</template>
						<template #title>
							<block>{{ item.name }}</block>
						</template>
						<template #subtitle1>
							<block>{{ item.subTitle }}</block>
						</template>
						<template #subtitle2>
							<block>规格：{{ item.standard }} * {{ item.normsInfo }}</block>
						</template>
						<template #limit v-if="item.limitCount != 0">
							<block>每日限购：{{ item.limitCount }}</block>
						</template>
						<template #price>
							<block>
								<PriceFont color="#FF4F30" bigSize="40rpx" smallSize="28rpx" :price="item.normsPrice" />
							</block>
						</template>
					</ShopCard>
					<uni-load-more :status="loading"></uni-load-more>
				</view>
			</view>
		</view>
		<view class="bottomFix" :style="{ paddingBottom: safeAreaBottom + 'px' }">
			<view class="left">
				<view class="icon_box" @click="goIndex">
					<view class="pic">
						<image src="/static/tabbar/home.png" mode="aspectFill"></image>
					</view>
					<view class="txt">首页</view>
				</view>
				<view class="icon_box" @click="goShopCar">
					<view class="pic">
						<image :src="allCount != 0 ? '/static/tabbar/shopcar_active.png':'/static/tabbar/shopcar.png'" mode="aspectFill" id="car"></image>
						<view class="point" v-if="allCount != 0">{{ allCount }}</view>
					</view>
					<view class="txt" :class="allCount !=0 ? 'active':''">购物车</view>
				</view>
			</view>
			<view class="btn" :class="allCount != 0 ? 'active':''" @click="goShopCar">去下单({{ allCount }})</view>
		</view>
		<view class="btncar" :class="start ? 'move':''" :style="{top:curPos.top + 'px',left:curPos.left  + 'px',transform:xMove}">
			<view class="box" :class="start ? 'move':''" :style="{transform:yMove}">
				<van-icon name="shopping-cart-o" size="36rpx" />
			</view>
		</view>
	</view>
</template>

<script>
	let safeAreaBottom = uni.getSystemInfoSync().safeAreaInsets.bottom;
	import { reqRecommendGoodsList } from '@/apis/rexiaogoods'
	import app from '@/App.vue';
	import { mapGetters } from 'vuex';
	import addCarAniMix from '@/utils/addCarAniMix';
	export default {
		name:'Recommend',
		mixins:[addCarAniMix],
		data() {
			return {
				statusBarHeight: app.globalData.statusBarHeight,
				safeAreaBottom: safeAreaBottom,
				goodsList: [],
				page: {
					pageSize: 15,
					pageNum: 1,
					total: 0
				},
			};
		},
		computed: {
			...mapGetters('car', ['allCount', 'allMoney'])
		},
		onLoad() {
			this.getGoodsList();
			const query = wx.createSelectorQuery()
			query.select("#car").boundingClientRect((res) => {
				this.targetPos = {top: res.top,left: res.left}
			}).exec();
		},
		onPullDownRefresh() {
			this.page = {
				pageNum: 1,
				pageSize: 15
			}
			this.goodsList = [];
			this.loading = "loading";
			this.getGoodsList();
		},
		onReachBottom() {
			console.log("到底部了")
			if (this.loading == "noMore") {
				return;
			}
			this.page.pageNum++;
			this.loading = "loading";
			this.getGoodsList();
		},
		methods: {
			onClickLeft() {
				uni.navigateBack();
			},
			async getGoodsList() {
				let { pageNum, pageSize } = this.page;
				const res = await reqRecommendGoodsList({ pageNum, pageSize })
				if (res.code === 200) {
					const data = res.data
					// 数组去重
					let arr = [...this.goodsList, ...data.list];
					const map = new Map();
					const newArr = arr.filter(v => !map.has(v.id) && map.set(v.id, v));
					this.goodsList = newArr;
					// this.goodsList = [...this.goodsList, ...data.list]
					if (res.data.isLastPage) {
						this.loading = "noMore"
					}
					uni.stopPullDownRefresh();
				}
			},
			refreshPage() {
				this.page = {
					pageNum: 1,
					pageSize: 15
				}
				this.goodsList = [];
				this.loading = "loading";
				this.getGoodsList();
			},
			toDetail(id, releaseStock) {
				if (releaseStock == 0) {
					uni.utils.toast("商品已售罄");
					return;
				}
				uni.navigateTo({ url: `/packageA/pages/goodsDetail/goodsDetail?id=${id}` })
			},
			goIndex() {
				uni.switchTab({ url: '/pages/index/index' })
			},
			goShopCar() {
				if (this.allCount == 0) return;
				uni.switchTab({ url: '/pages/shopCar/shopCar' })
			}
		}
	}
</script>
<style>
	page {
		background: #F5F5F5;
	}
</style>
<style lang="scss">
	.content {
		padding: 24rpx;
		background: #F5F5F5;
		padding-bottom: 100rpx;
	}

	.content-box-top {
		width: 702rpx;
		height: 280rpx;
		margin-bottom: 24rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.bottomFix {
		position: fixed;
		width: 750rpx;
		height: 100rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		bottom: 0;
		padding-right: 24rpx;
		align-items: center;

		.left {
			margin-left: 48rpx;

			.icon_box {
				display: inline-block;
				width: 70rpx;
				margin-right: 38rpx;

				.pic {
					margin: 0 auto;
					width: 40rpx;
					height: 40rpx;
					margin-bottom: 6rpx;
					position: relative;

					.point {
						position: absolute;
						top: -5rpx;
						right: -5rpx;
						font-weight: 500;
						font-size: 16rpx;
						color: #FFFFFF;
						width: 20rpx;
						height: 20rpx;
						background-color: #FF3030;
						border-radius: 50%;
						text-align: center;
						line-height: 20rpx;
					}

					image {
						width: 100%;
						height: 100%;
					}
				}

				.txt {
					width: 100%;
					font-weight: 400;
					font-size: 20rpx;
					color: #333333;
					text-align: center;

					&.active {
						color: #FF1642 !important;
					}
				}
			}
		}

		.btn {
			margin-right: 24rpx;
			width: 434rpx;
			height: 76rpx;
			border-radius: 40rpx;
			font-weight: 500;
			font-size: 32rpx;
			line-height: 76rpx;
			text-align: center;
			color: #808080;
			background: #DDDDDD;

			&.active {
				background: #FF1642;
				color: #FFFFFF;
			}

			&.red {
				color: #FF1642;
				border: 2rpx solid #FF1642;
			}

		}
	}

	.btncar {
		position: fixed;
		z-index: 2000;
		width: 48rpx;
		height: 48rpx;
		color: #fff;
		transition-timing-function: linear;

		.box {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50%;
			background-color: #FF1642;
			transition-timing-function: cubic-bezier(0.5, -1, 1, 1)
		}
	}

	.move {
		transition: all 0.6s;
	}
</style>